<!-- https://element-plus.gitee.io/zh-CN/guide/i18n.html#configprovider -->

<script>
import { defineComponent } from "vue";
import { ElConfigProvider } from "element-plus";

import zhCn from "element-plus/dist/locale/zh-cn.mjs";

export default defineComponent({
  components: {
    ElConfigProvider,
  },
  setup() {
    return {
      locale: zhCn,
    };
  },
});
</script>

<template>
  <el-config-provider :locale="locale" size="default">
    <RouterView />
  </el-config-provider>
</template>

<style>
/* 通用css变量 */
:root {
  /* 头部高度 */
  --layout-header-height: 50px;
  /* 面包屑高度 */
  --breadcrumb-height: 40px;
  /* 头部高度+面包屑高度  */
  --layout-hb-height: 90px;
  /* 通用布局padding */
  --layout-padding: 14px;
}
</style>

<style lang="scss">
$cancle-padding: calc(0px - var(--layout-padding));
/* 抵消layout-padding */
.cancle-padding {
  margin: $cancle-padding;
}
.cancle-padding-t {
  margin-top: $cancle-padding;
}
.cancle-padding-l {
  margin-left: $cancle-padding;
}
.cancle-padding-b {
  margin-bottom: $cancle-padding;
}
.cancle-padding-r {
  margin-right: $cancle-padding;
}
</style>
